<template>
  <div class="h-full">
    <a-card
      :loading="table.loading"
      :bodyStyle="{
        height: '100%'
      }"
    >
      <template #title>
        <h2>{{ t["选择皮肤"] }}</h2>
      </template>
      <div class="flex justify-between gap-2 mb-4">
        <div class="w-fit">
          <a-input-search
            :placeholder="t['请输入皮肤名称']"
            @keydown.enter="search"
            @search="search"
            allow-clear
            v-model="query.skinName"
          ></a-input-search>
        </div>
        <div class="w-[140px]">
          <Scope :include="['-', '0', '4']" type="select" v-model="query.scope" @change="search" />
        </div>
      </div>
      <div class="flex my-4">
        <a-pagination
          v-model:current="query.pageNum"
          :pageSize="query.pageSize"
          :total="query.total"
          @change="change"
        ></a-pagination>
      </div>
      <ul class="ul-grid" :class="[cols]" v-if="table.data.length > 0">
        <li
          :class="{ active: item.skinId === current?.skinId }"
          v-for="item in table.data"
          @click="selectSkin(item)"
        >
          <img :src="item.skinList[0]?.background" />
          <div class="actions absolute top-1 right-1">
            <a-button shape="circle" @click="preview(item)">
              <IconEye />
            </a-button>
          </div>
          <div class="text-[18px] text-black font-bold mt-2">
            {{ item.skinName }}
          </div>
        </li>
      </ul>
      <a-empty v-else />
    </a-card>
    <a-image-preview-group
      v-model:visible="visible"
      infinite
      :srcList="current?.skinList.map((v) => v.background)"
    />
  </div>
</template>

<script setup lang="ts">
import { ISkin, listSkins } from "@/api/service/skin";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";

const t = translate("公共模块");
const emit = defineEmits(["select"]);
const skinId = defineModel<string>();
const props = withDefaults(
  defineProps<{
    themeId?: string;
    cols: string;
  }>(),
  {
    cols: "grid-cols-4"
  }
);

const visible = ref();
const current = ref<ISkin>();
const query = useQuery<ISkin>({
  pageSize: 6 * 2,
  scope: ENUM_DATA_SCOPE.THIS_SHOP_AND_SHARED
});
const table = useTable<ISkin>();

const getSkin = async () => {
  table.value.loading = true;
  const data = await listSkins(query.value);
  table.value.data = data.rows;
  table.value.loading = false;
  query.value.total = data.total;
};

const search = () => {
  query.value.pageNum = 1;
  getSkin();
};
const change = (current: number) => {
  query.value.pageNum = current;
  getSkin();
};
// onMounted(() => {
//   getSkin();
// });

const selectSkin = (item: ISkin) => {
  current.value = item;
  skinId.value = item.skinId;
  emit("select", item);
};
const preview = (item: ISkin) => {
  selectSkin(item);
  visible.value = true;
};

watch(
  () => props.themeId,
  () => {
    if (props.themeId) {
      query.value.groupsId = props.themeId;
      getSkin();
    }
  }
);
</script>

<style lang="scss" scoped>
.ul-grid {
  @apply grid  gap-x-4 gap-y-6;
  li {
    @apply flex flex-col w-full overflow-hidden relative cursor-pointer text-center p-2;

    img {
      @apply object-contain;
      width: 100%;
    }
    .actions {
      opacity: 0;
    }
    &:hover {
      .actions {
        opacity: 1;
      }
    }
  }
}

.active {
  outline: 2px solid var(--primary);
}
</style>
